
import { useState } from "react";
import AddTodo from "./AddTodo";
import TodoFilter from "./TodoFilter";
import TodoList from "./TodoList";
import { Todo } from "../../type";

export default function Test() {


    const [todos, setTodos] = useState<Todo[]>([]);
    const [filter, setFilter] = useState("all");

    const addTodo = (text: string) => {
        const newTodo = {
            id: Date.now(),
            text,
            completed: false,
        };
        setTodos([...todos, newTodo]);
    };
    const deleteTodo = (id: number) => {
        setTodos(todos.filter((todo) => todo.id !== id));
    };
    const toggleTodo = (id: number) => {
        setTodos(
            todos.map((todo) => {
                if (todo.id === id) {
                    todo.completed = !todo.completed;
                }
                return todo;
            })
        );
    };
    const getFilterTodos = () => {
        switch (filter) {
            case "active":
                return todos.filter((todo) => !todo.completed);
            case "completed":
                return todos.filter((todo) => todo.completed);
            default:
                return todos;
        }
    };

    return(
        <>
        <AddTodo addTodo={addTodo}></AddTodo>
        <TodoList
            todos={getFilterTodos()}
            toggleTodo={toggleTodo}
            deleteTodo={deleteTodo}
        ></TodoList>
        <TodoFilter setFilter={setFilter}> </TodoFilter>
    </>
    )


}

